import React from 'react';
// hook的定义:
// 01: hook本质上就是函数
// 02: hook 只能在函数组件或自定义hook 使用
// 03: hook 不能在普通函数中调用
// 04: hook 不能被有条件的调用


// useState
// 作用:可以在函数组件中定义状态,这样就使得函数组件有状态了
// 注意: 只能同时setCount 修改函数组件的状态

//setCount使用方式 2种:
// 方式1 :直接传值 setCount(新值)
// 方式2: 参数为一个函数, 函数的返回值就是赋值的新值

// 注意: 当修改引用数据类型的时候, 一定注意赋值的是一个新的引用数据, 否则react 会认为是同一个内存地址
// 导致不会监听到数据的变化,
import { useState } from 'react';
const Father = () => {
    const [count, setCount] = useState(0);

    const [playerArr, setPlayerArrFn] = useState([{
        id: 1,
        name: '孙雯'
    },
    {
        id: 2,
        name: '刘爱玲'
    },
    {
        id: 3,
        name: '水庆霞'
    }
    ])

    const [user, setUserFn] = useState({ name: '张三', age: 20 })
    // 定义editUserFn 方法
    const edituserFn = () => {
        console.log('edituserFn');

        // setUserFn({
        //     ...user,
        //     age: user.age + 1
        // })

        // user.age = user.age + 1
        // setUserFn({ ...user })

        setUserFn(() => {
            return {
                ...user,
                age: user.age + 1
            }
        })
    }


    return (
        <div>
            <p>我是函数组件</p>
            {/* 操作基本的数据类型 */}
            <p onClick={() => setCount(count + 1)}>count:{count}-方式1修改</p>
            <p onClick={() => {
                setCount((m) => {
                    // console.log('m', m);  m 为要修改的值
                    return m + 1
                })
            }}>count:{count}-方式2修改</p>
            {/* 操作复杂的数据类型-数组 */}
            <ul>
                {
                    playerArr.map(item => <li key={item.id}>{item.name}</li>)
                }
            </ul>
            <p>
                <button onClick={() => {
                    playerArr.push({
                        id: playerArr[playerArr.length - 1].id + 1,
                        name: '王霜'
                    })
                    // console.log('playerArr', playerArr)
                    // let arr = []
                    // playerArr.forEach(item => arr.push(item))
                    // const arr1 = playerArr
                    setPlayerArrFn([...playerArr])
                }}>添加运动员</button>
            </p>
            {/* 操作对象 */}
            <p onClick={edituserFn}>user:{user.name} -- {user.age}</p>
        </div>
    );
}

export default Father;
